<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Apricot 1.3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable.standalone.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css">
    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="css/custom.css" > 
    
	<link href="css/datepicker3.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
    
	<!-- title 中蓝色小图标-->
    <link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body>

	<!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

  	<!-- TOP NAVBAR -->
    <script type="text/javascript" src="common/public/header.js"></script>
    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <script type="text/javascript" src="common/public/slider.js"></script>
    <!-- /END OF TOP NAVBAR -->




	<!-- lxklxk########### -->
    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">
            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <span class="entypo-menu"></span>
                            <span>诊断</span>
                        </h2>
                    </div>
                    <div class="col-sm-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">
                      </div>

                    </div>
                   
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li>
                <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">诊断</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">故障诊断与报警</a>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->



            <div class="content-wrap">
                <div class="row">


                    <div class="col-sm-12">

                        <div class="nest" id="FootableClose" style="height:100%;">
                            <div class="title-alt">
                                <h6>诊断报告</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#FootableClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#Footable">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>

                            </div>

                            <div class="body-nest" id="Footable" style=" height:90%;  /* border:1px solid blue  */ ">
                                <table  id="diagnosis_show" class="table" data-filtering="true">
                                    <thead>
                                        <tr>
                                            <th>Id </th>
                                            <th>时间</th>
                                            <th>触犯规则</th>
                                            <th>主机名称</th>
                                            <th>报警方式</th>
                                            <th>发送状态</th>
                                            <th>是否确认</th>
                                            <th>规则状态</th>
                                            <th>程度</th>
                                            <th>诊断</th>
                                        </tr>
                                    </thead>
                                    <tbody id="diagnosis_body"> </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页栏 -->
                            <div style="margin-top:0px; height:5%; /* border:1px solid pink */ ">
								<nav style="text-align: center">
									<ul id="diagnosis_ul" class="pagination" >
									    <!-- <li><a href="#" >&laquo;&laquo;</a></li>
										<li><a href="#" >&laquo;</a></li>
										<li><a id="page_first" href="#">1</a></li>
										<li><a id="page_mid" href="#">2</a></li>
										<li><a id="page_last" href="#">3</a></li>
										<li><a href="#">&raquo;</a></li>
										<li><a href="#">&raquo;&raquo;</a></li> -->
									</ul>
								</nav>
							</div>
							
                            <!-- 诊断    插入模态框******************** -->
                            <div class="modal fade" id="insertDiagModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                       <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                          <h4 class="modal-title" >诊断详情</h4>
                                       </div>
                                       <div class="modal-body">
                                           <div class="body-nest">
                                               <form role="form" class="form-horizontal">
                                             		 <div class="form-group">
			                                            <label class="col-sm-3 control-label">触发规则</label>
			                                         	<div class="col-lg-6" id="el">
			                                         	<!-- 给出规则名和描述 就可以啦 诊断栏里面显示的是日志 -->
					                                         <textarea id="rule_display" rows="3" cols="35" ></textarea>
					                                         <span class="help-block">触发的规则名称和描述</span>
					                                    </div>
		                                             </div>
		                                             <div class="form-group">
			                                            <label class="col-sm-3 control-label"  >故障</label>
			                                         	<div class="col-lg-6" id="el">
					                                         <textarea id="log_display" rows="10" cols="35" ></textarea>
					                                         <span class="help-block">故障日志片段</span>
					                                    </div>
		                                             </div>
		                                             <br>
		                                             
		                                              <div class="form-group">
					                                      <label class="col-sm-3 control-label">故障原因</label>
					                                      <div class="col-lg-7">
					                                          <input id="fault_reason" type="text" class="form-control" name="ruleName">
					                                          <span class="help-block">请输入故障原因</span>
					                                      </div>
					                                  </div>
	                                           </form>
                                           </div>
                                       </div>
	                                   <div class="modal-footer">
	                                      <button  type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
	                                      <button id="metricConfirm" type="button" class="btn btn-default">确定</button>
	                                   </div>
                              		</div><!-- /.modal-content -->
                        		  </div><!-- /.modal-dialog -->
                  		    </div> 
                            
                            
                             <!-- 诊断    查询模态框******************** -->
                            <div class="modal fade" id="selectDiagModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                       <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                          <h4 class="modal-title" id="myModalLabel">诊断详情</h4>
                                       </div>
                                       		<!-- var failureCauseId;
											var failureCause;
											var ruleId;
											var ruleDetail; -->
                                       <div class="modal-body">
                                           <div class="body-nest">
                                               <form role="form" class="form-horizontal">
                                             		 <div class="form-group">
			                                            <label class="col-sm-3 control-label">故障ID</label>
			                                         	<div class="col-lg-7">
					                                          <input id="failureCauseId" type="text" value="10" class="form-control" name="ruleName">
					                                    </div>
		                                             </div>
		                                             
		                                             <div class="form-group">
			                                            <label class="col-sm-3 control-label">故障原因</label>
			                                         	<div class="col-lg-6" id="el">
					                                         <textarea id="failureCauseArea" style="width: 100%; height: 60px" ></textarea>
					                                    </div>
		                                             </div>
		                                             <br>
		                                             
		                                              <div class="form-group">
					                                      <label class="col-sm-3 control-label">规则ID</label>
					                                      <div class="col-lg-7">
					                                          <input id="ruleId" type="text" value="10" class="form-control" name="ruleName">
					                                          
					                                      </div>
					                                  </div>
					                                  
					                                  <div class="form-group">
					                                      <label class="col-sm-3 control-label">规则详情</label>
					                                      <div class="col-lg-7">
					                                          <input id="ruleDetail" type="text" class="form-control" name="ruleName">
					                                      </div>
					                                  </div>
	                                           </form>
                                           </div>
                                       </div>
	                                   <div class="modal-footer">
	                                      <!-- <button  type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> -->
	                                      <button id="metricConfirm" type="button" class="btn btn-default" data-dismiss="modal">确认</button>
	                                   </div>
                              		</div><!-- /.modal-content -->
                        		  </div><!-- /.modal-dialog -->
                  		    </div>   
                                
                            
                        </div>
                    </div>
                </div>
            </div>


            <!-- /END OF CONTENT -->

			<!-- 进程搜索模块 -->
			<!-- <div class="content-wrap">
		         <div class="row">
		             <div class="col-sm-12">
		                 <div class="nest" id="inlineClose">
		                     <div class="title-alt">
		                         <h6>故障诊断报告检索</h6>
		                         <div class="titleClose">
		                             <a class="gone" href="#inlineClose">
		                                 <span class="entypo-cancel"></span>
		                             </a>
		                         </div>
		                         <div class="titleToggle">
		                             <a class="nav-toggle-alt" href="#inline">
		                                 <span class="entypo-up-open"></span>
		                             </a>
		                         </div>
		
		                     </div>
		
		                     <div class="body-nest" id="inline">
		
		                         <div class="form_center">
		                             <form role="form" class="form-inline">
		                                 <div class="form-group">主机IP &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		                                     <input id="exampleInputEmail2" class="form-control">
		                                 </div>
		                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		                                  <div class="form-group">主机名 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		                                     <input id="exampleInputEmail2" class="form-control">
		                                 </div>
		                                 <button class="btn btn-success" type="submit">查询</button>
		                             </form>
		                         </div>
		
		                     </div>
		
		                 </div>
		             </div>
		         </div>
		     </div> -->
            <!-- 进程搜索模块结束 -->

            <!-- FOOTER -->
            <div class="footer-space"></div>
            <div id="footer">
                <div class="devider-footer-left"></div>
                
            </div>
            <!-- / END OF FOOTER -->


        </div>
    </div>
    <!--  END OF PAPER WRAP -->
    
    
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/iCheck/jquery.icheck.js"></script>
    <script type="text/javascript" src="assets/js/switch/bootstrap-switch.js"></script>
   
    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    
    <!--footable相关的js  -->
    <script type="text/javascript" src="plugins/footable/3.1.6/footable.min.js"></script>
	<script type="text/javascript" src="plugins/footable/3.1.6/footable.js"></script>
    
    <!-- 获取后台数据相关的编写的JS -->
    <script type="text/javascript" src="common/diagnosis/diagnosis.js"></script>

    
</body>

</html>
